<template>
  <div class="orders-container">
    <a-page-header title="My Orders" sub-title="View and manage your order history"/>

    <!-- 页签切换 -->
    <a-tabs v-model:activeKey="activeTab" class="order-tabs" @change="handleTabChange">
      <a-tab-pane key="orders" tab="My Orders">
        <!-- 订单筛选 -->
        <div class="filter-container">
          <a-form layout="inline">
            <a-form-item label="Order Status">
              <a-select v-model:value="filterParams.status" style="width: 150px">
                <a-select-option value="">All</a-select-option>
                <a-select-option value="1">Awaiting Payment</a-select-option>
                <a-select-option value="2">Being Processed</a-select-option>
                <a-select-option value="3">In Transit</a-select-option>
                <a-select-option value="4">To be evaluated</a-select-option>
                <a-select-option value="5">Completed</a-select-option>
                <a-select-option value="6">Cancelled</a-select-option>
                <a-select-option value="7">Apply for cancellation</a-select-option>
              </a-select>
            </a-form-item>

            <a-form-item label="Order Date">
              <a-range-picker v-model:value="filterParams.dateRange"/>
            </a-form-item>

            <a-form-item>
              <a-button type="primary" @click="handleSearch">Search</a-button>
              <a-button style="margin-left: 8px" @click="resetFilters">Reset</a-button>
            </a-form-item>
          </a-form>
        </div>

        <!-- 订单列表 -->
        <a-table
            :dataSource="orders"
            :columns="columns"
            :loading="loading"
            rowKey="id"
            :pagination="{
            ...pagination,
            showTotal: total => `Total ${total} orders`,
            showSizeChanger: true,
            pageSizeOptions: ['10', '20', '50', '100']
          }"
            @change="handleTableChange"
            :scroll="{ x: true }"
            class="orders-table"
        >
          <!-- 订单号列 -->
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'order_no'">
              <a @click="showOrderDetail(record)">{{ record.order_no }}</a>
            </template>

            <!-- 状态列 -->
            <template v-if="column.key === 'status'">
              <a-tag :color="getStatusColor(record.status)">
                {{ getStatusText(record.status) }}
              </a-tag>
            </template>

            <!-- 操作列 -->
            <template v-if="column.key === 'action'">
              <a-space>
                <a-button size="small" @click="showOrderDetail(record)">Details</a-button>

                <!-- 待付款 -->
                <template v-if="record.status === 1">
                  <a-button size="small" type="primary" @click="payOrder(record)">Repay</a-button>
                  <a-button size="small" danger @click="cancelOrder(record)">Cancel</a-button>

                </template>

                <!-- 待发货 -->
                <template v-if="record.status === 2">
                  <a-button size="small" @click="buyAgain(record)">Buy again</a-button>
<!--                  <a-button size="small" @click="cancelOrder(record)">cancellation of order</a-button>-->
                </template>

                <!-- 待收货 -->
                <template v-if="record.status === 3">
                  <a-button size="small" type="primary" @click="confirmReceipt(record)">Confirm Receipt</a-button>
                  <a-button size="small" @click="viewLogistics(record)">View Logistics</a-button>
                </template>

                <!-- 待评价 -->
                <template v-if="record.status === 4 || record.status === 7">
                  <a-button size="small" type="primary" @click="reviewOrder(record)">Review</a-button>
                  <a-button size="small" @click="buyAgain(record)">buyAgain</a-button>
                </template>

                <!-- 已完成 -->
                <template v-if="record.status === 5">
                  <a-button size="small" @click="buyAgain(record)">buyAgain</a-button>
                  <a-button size="small" danger @click="deleteOrder(record)">Delete Order</a-button>
                </template>

                <!-- 已取消 -->
                <template v-if="record.status === 6">
                  <a-button size="small" @click="buyAgain(record)">buyAgain</a-button>
                  <a-button size="small" danger @click="deleteOrder(record)">Delete Order</a-button>
                </template>
              </a-space>
            </template>
          </template>
        </a-table>
      </a-tab-pane>

      <a-tab-pane key="afterSales" tab="My After-Sales">
        <!-- 售后列表内容 -->
        <div class="after-sales-container">
          <a-empty v-if="!afterSales.length" description="No after-sales records found" />
          <a-list v-else :dataSource="afterSales" :loading="afterSalesLoading">
            <template #renderItem="{ item }">
              <a-list-item>
                <a-card style="width: 100%">
                  <a-descriptions :title="`${item.detail.goods_name }`" bordered>
                    <a-descriptions-item label="Type">{{ item.refund_type === 1 ? 'Return & Refund' : 'Exchange' }}</a-descriptions-item>
                    <a-descriptions-item label="Refund Quantity">{{ item.refund_num }}</a-descriptions-item>
                    <a-descriptions-item label="Refund Amount">¥{{ item.apply_money }}</a-descriptions-item>
                    <a-descriptions-item label="Reason">{{ item.remark }}</a-descriptions-item>
                    <a-descriptions-item label="Apply Time">{{ item.create_time }}</a-descriptions-item>
                    <a-descriptions-item label="Status">
                      <a-tag :color="getAfterSaleStatusColor(item.audit_status)">
                        {{ getAfterSaleStatusText(item.audit_status) }}
                      </a-tag>
                    </a-descriptions-item>
                    <a-descriptions-item label="Actions">
                      <a-space>
                        <a-button type="link" @click="viewAfterSaleDetail(item)">View Details</a-button>
                        <!-- 只在待审核状态显示取消申请按钮 -->
                        <!-- <a-button
                          v-if="item.audit_status === 1"
                          type="link"
                          danger
                          @click="cancelAfterSale(item)"
                        >
                          取消申请
                        </a-button> -->
                      </a-space>
                    </a-descriptions-item>
                  </a-descriptions>
                </a-card>
              </a-list-item>
            </template>
          </a-list>
        </div>
      </a-tab-pane>
    </a-tabs>

    <!-- 物流信息弹窗 -->
    <LogisticsModal
        v-model:open="logisticsVisible"
        :logistics-info="logisticsInfo"
    />

    <!-- 评价弹窗 -->
    <OrderReviewModal
        v-model:open="reviewVisible"
        :order-id="currentReviewOrder?.id"
        @submit="handleReviewSubmit"
    />

    <!-- 订单详情抽屉 -->
    <OrderDetailDrawer
        v-model:open="drawerVisible"
        :order="currentOrder"
        @pay="payOrder"
        @cancel="cancelOrder"
        @confirm-receipt="confirmReceipt"
        @view-logistics="viewLogistics"
        @contact-seller="contactSeller"
        @review="reviewOrder"
        @buy-again="buyAgain"
        @delete="deleteOrder"
        @update:visible="closeDrawer"
        @after-sale-submit="handleAfterSaleSubmit"
    />

    <!-- 售后详情抽屉 -->
    <AfterSaleDetailDrawer
        v-model:open="afterSaleDetailVisible"
        :after-sale-detail="currentAfterSaleDetail"
        @refresh="fetchAfterSales"
        @update:visible="closeAfterSaleDrawer"
    />
  </div>
</template>

<script setup>
import {ref, reactive, onMounted, computed, getCurrentInstance} from 'vue';
import { message, Modal } from 'ant-design-vue';
import { getOrderList, getOrderDetail, deleteOrder as deleteOrderApi, getLogistics, addComment, receive, applyAfterSale, getMyAfterSale, getAfterSaleDetail } from '@/api/user';
import LogisticsModal from '@/components/LogisticsModal.vue';
import OrderReviewModal from '@/components/OrderReviewModal.vue';
import OrderDetailDrawer from '@/components/OrderDetailDrawer.vue';
import AfterSaleDetailDrawer from '@/components/AfterSaleDetailDrawer.vue';
import {useRouter} from "vue-router";
import {orderCancel} from "@/api/order";
import {useCurrencyStore} from "@/store/index";
const { proxy } = getCurrentInstance();
// 定义路由
const router = useRouter()
const useCurrency = useCurrencyStore()
// 当前激活的页签
const activeTab = ref('orders');

// 表格加载状态
const loading = ref(false);
const afterSalesLoading = ref(false);

// 售后列表数据
const afterSales = ref([]);

// 筛选参数
const filterParams = reactive({
  status: '',
  dateRange: null
});

// 分页信息
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0
});

// 表格列定义
const columns = [
  {
    title: 'order_no',
    dataIndex: 'order_no',
    key: 'order_no',
    width: 180,
    align: 'center'
  },
  {
    title: 'create_time',
    dataIndex: 'create_time',
    key: 'create_time',
    width: 180,
    align: 'center'
  },
  {
    title: 'total_num',
    dataIndex: 'total_num',
    key: 'total_num',
    width: 120,
    align: 'center'
  },
  {
    title: 'pay_price',
    dataIndex: 'pay_price',
    key: 'pay_price',
    customRender: ({ text }) => `${useCurrency.currentCurrency.unit}${(proxy.$ConvertPrice(text) || 0)}`,
    width: 120,
    align: 'center'
  },
  {
    title: 'status',
    dataIndex: 'status',
    key: 'status',
    width: 120,
    align: 'center'
  },
  {
    title: 'action',
    key: 'action',
    width: 200,
    align: 'center'
  }
];

// 订单数据
const orders = ref([]);

// 抽屉显示状态
const drawerVisible = ref(false);
// 当前查看的订单
const currentOrder = ref(null);

// 物流信息弹窗
const logisticsVisible = ref(false);
// 物流信息
const logisticsInfo = ref(null);

// 评价弹窗
const reviewVisible = ref(false);
const currentReviewOrder = ref(null);

// 售后详情抽屉
const afterSaleDetailVisible = ref(false);
const currentAfterSaleDetail = ref(null);

// 订单状态常量
const orderState = {
  toPay: 1,      // 待付款
  toShip: 2,     // 待发货
  toReceive: 3,  // 待收货
  toReview: 4,   // 待评价
  completed: 5,  // 已完成
  canceled: 6    // 已取消
};

// 解析规格文本
const parseSpecText = (specText) => {
  if (!specText) return { size: '', imageUrl: '' };

  // 检查是否包含图片URL和尺寸
  if (specText.includes('http') && specText.includes('，')) {
    const parts = specText.split('，');
    return {
      imageUrl: parts[0],
      size: parts[1] || ''
    };
  }

  // 检查是否只有图片URL
  if (specText.includes('http')) {
    return {
      imageUrl: specText,
      size: ''
    };
  }

  // 只有尺寸
  return {
    imageUrl: '',
    size: specText
  };
};

// 获取状态颜色
const getStatusColor = (status) => {
  const colorMap = {
    1: 'orange',
    2: 'blue',
    3: 'cyan',
    4: 'purple',
    5: 'green',
    6: 'red'
  };
  return colorMap[status] || 'default';
};

// 获取售后状态颜色
const getAfterSaleStatusColor = (status) => {
  const colorMap = {
    1: 'orange',  // 待审核
    2: 'green',   // 已同意
    3: 'red'      // 已拒绝
  };
  return colorMap[status] || 'default';
};

// 获取状态文本
const getStatusText = (status) => {
  const textMap = {
    1: 'Awaiting Payment',
    2: 'Being Processed',
    3: 'In Transit',
    4: 'To be evaluated',
    5: 'Completed',
    6: 'Canceled',
    7: 'Apply for cancellation'
  };
  return textMap[status] || 'Unknown Status';
};

// 获取售后状态文本
const getAfterSaleStatusText = (status) => {
  const textMap = {
    1: 'Pending Audit',
    2: 'Approved',
    3: 'Rejected'
  };
  return textMap[status] || 'Unknown Status';
};

// 格式化日期
const formatDate = (date) => {
  if (!date) return '';
  const d = new Date(date);
  const year = d.getFullYear();
  const month = String(d.getMonth() + 1).padStart(2, '0');
  const day = String(d.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};


// 格式化倒计时
const formatCountdown = (seconds) => {
  if (seconds <= 0) return 'Expired';

  // Maximum payment time is 30 minutes from order creation
  const maxTimeInSeconds = 30 * 60; // 30 minutes in seconds

  // If seconds is greater than the max time, it's already expired
  if (seconds > maxTimeInSeconds) {
    return 'Expired';
  }

  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = seconds % 60;

  return `${minutes}m ${remainingSeconds}s`;
};

// 获取订单列表
const fetchOrders = async () => {
  loading.value = true;
  try {
    const params = {
      page: pagination.current,
      pagesize: pagination.pageSize,
      status: filterParams.status || undefined,
      start_date: filterParams.dateRange && filterParams.dateRange[0] ? formatDate(filterParams.dateRange[0]) : undefined,
      end_date: filterParams.dateRange && filterParams.dateRange[1] ? formatDate(filterParams.dateRange[1]) : undefined
    };

    const res = await getOrderList(params);
    if (res.code === 200) {
      // 处理倒计时
      res.result.data.map((item) => {
        if (item.status == orderState.toPay && item.countdown < 0) {
          item.status = orderState.canceled;
        }
      });
      orders.value = res.result.data || [];
      pagination.total = res.result.total || 0;
    } else {
      message.error(res.message || 'Failed to get order list');
    }
  } catch (error) {
    console.error('Failed to get order list:', error);
    message.error('Failed to get order list, please try again later');
  } finally {
    loading.value = false;
  }
};

// 获取售后列表
const fetchAfterSales = async () => {
  afterSalesLoading.value = true;
  try {
    // 这里应该调用获取售后列表的API，暂时使用模拟数据
    const res = await getMyAfterSale();
    // 模拟数据
    setTimeout(() => {
      afterSales.value = res.result.data;
      afterSalesLoading.value = false;
    }, 500);
  } catch (error) {
    console.error('Failed to get after-sales list:', error);
    message.error('Failed to get after-sales list, please try again later');
    afterSalesLoading.value = false;
  }
};

// 搜索
const handleSearch = () => {
  pagination.current = 1;
  fetchOrders();
};

// 重置筛选
const resetFilters = () => {
  filterParams.status = '';
  filterParams.dateRange = null;
  pagination.current = 1;
  fetchOrders();
};

// 显示订单详情
const showOrderDetail = async (order) => {
  try {
    const res = await getOrderDetail(order.id);
    if (res.code === 200) {
      currentOrder.value = res.result;
      drawerVisible.value = true;
    } else {
      message.error(res.message || 'Failed to get order details');
    }
  } catch (error) {
    console.error('Failed to get order details:', error);
    message.error('Failed to get order details, please try again later');
  }
};

// 付款
const payOrder = async (order) => {
  router.push({
    path:'/user/checkout',
    query: {
      orderId: order.id,
      step: 2
    }
  });
  // try {
  //   const res = await payOrderApi(order.id);
  //   if (res.code === 200) {
  //     message.success(`Order ${order.order_no} Payment successfully`);
  //     fetchOrders();
  //   } else {
  //     message.error(res.message || 'Payment failed');
  //   }
  // } catch (error) {
  //   message.error('Payment failed, please try again later');
  // }
};

// 取消订单
const cancelOrder = async (order) => {
  try {
    Modal.confirm({
      content: 'Are you sure you want to cancel the order?',
      cancelText: 'Think again',
      okText: 'Confirm',
      onOk: async () => {
        await orderCancel({
          id: order.id,
          cancel_reason: 'other reason',
        }).then((res) => {
          if (res.code === 200) {
            message.success(`Order ${order.order_no} has been cancelled`);
            fetchOrders();
          } else {
            message.error(res.msg)
          }
        })
      }
    });
  } catch (error) {
    console.error('Failed to cancel order:', error);
    message.error('Failed to cancel order, please try again later');
  }
};

// 确认收货
const confirmReceipt = async (order) => {
  try {
    Modal.confirm({
      content: 'Have you received the goods?',
      cancelText: 'Cancel',
      okText: 'Confirm Receipt',
      onOk: async () => {
        const res = await receive({id:order.id});
        if (res.code === 200) {
          message.success(`Order ${order.order_no} has been confirmed received`);
          fetchOrders();
        } else {
          message.error(res.message || 'Failed to confirm receipt');
        }
      }
    });
  } catch (error) {
    console.error('Failed to confirm receipt:', error);
    message.error('Failed to confirm receipt, please try again later');
  }
};

// 删除订单
const deleteOrder = async (order) => {
  try {
    Modal.confirm({
      content: 'Are you sure you want to delete this order?',
      cancelText: 'Cancel',
      okText: 'Confirm',
      onOk: async () => {
        const res = await deleteOrderApi({id:order.id});
        if (res.code === 200) {
          message.success(`Order ${order.order_no} has been deleted`);
          if (drawerVisible.value) {
            drawerVisible.value = false;
          }
          fetchOrders();
        } else {
          message.error(res.message || 'Failed to delete order');
        }
      }
    });
  } catch (error) {
    console.error('Failed to delete order:', error);
    message.error('Failed to delete order, please try again later');
  }
};

// 查看物流
const viewLogistics = async (order) => {
  try {
    const res = await getLogistics({id:order.id});
    if (res.code === 200 && res.result) {
      // 确保我们有数据可用
      if (res.result.length > 0) {
        logisticsInfo.value = res.result[0];
        // 如果API返回的数据没有包含tracks字段,但有数据内容,则进行适配
        if (!logisticsInfo.value.delivery_tracks && !logisticsInfo.value.tracks && !logisticsInfo.value.delivery_info) {
          // 尝试适配不同的API数据结构
          console.log("Adapting logistics data format");
        }
        logisticsVisible.value = true;
      } else {
        message.info('No logistics information available for this order');
      }
    } else {
      message.error(res.message || 'Failed to get logistics information');
    }
  } catch (error) {
    console.error('Failed to get logistics information:', error);
    message.error('Failed to get logistics information, please try again later');
  }
};

// 联系卖家
const contactSeller = (order) => {
  // 实现联系卖家的逻辑
  message.info('Contact Seller Function Development');
};

// 评价订单
const reviewOrder = (order) => {
  currentReviewOrder.value = order;
  reviewVisible.value = true;
};

// 处理评价提交
const handleReviewSubmit = async (reviewData) => {
  try {
    const res = await addComment(reviewData);
    if (res.code === 200) {
      message.success('Review submitted successfully');
      fetchOrders();
      reviewVisible.value = false;
    } else {
      message.error(res.message || 'Failed to submit review');
    }
  } catch (error) {
    console.error('Failed to submit review:', error);
    message.error('Failed to submit review, please try again later');
  }
};

// 再次购买
const buyAgain = (order) => {
  const urlName = order.detail[0].goods_name.replace(/\s+/g, '-').toLowerCase();
  window.location.href = `/product/${urlName}.html`;
};

// 表格变化
const handleTableChange = (pag) => {
  pagination.current = pag.current;
  pagination.pageSize = pag.pageSize;
  fetchOrders();
};

// 处理售后提交
const handleAfterSaleSubmit = async (data) => {
  try {
    const res = await applyAfterSale(data);
    if (res.code === 200) {
      message.success('After-sale application submitted successfully');
      fetchOrders();
    } else {
      message.error(res.message || 'Failed to submit after-sale application');
    }
  } catch (error) {
    console.error('Failed to submit after-sale application:', error);
    message.error('Failed to submit after-sale application, please try again later');
  }
};

// 关闭面板
const closeDrawer = (bool) => {
  drawerVisible.value = bool;
};
const closeAfterSaleDrawer = (bool) => {
  afterSaleDetailVisible.value = bool;
};
// 查看售后详情
const viewAfterSaleDetail = async (item) => {
  try {
    const res = await getAfterSaleDetail({ id: item.id });
    if (res.code === 200) {
      currentAfterSaleDetail.value = res.result;
      afterSaleDetailVisible.value = true;
    } else {
      message.error(res.message || 'Failed to get after-sale details');
    }
  } catch (error) {
    console.error('Failed to get after-sale details:', error);
    message.error('Failed to get after-sale details, please try again later');
  }
};

// 取消售后申请
const cancelAfterSale = async (item) => {
  try {
    Modal.confirm({
      title: '确认取消售后申请',
      content: '确定要取消该售后申请吗？',
      onOk: async () => {
        // 这里应该调用取消售后的API
        // const res = await cancelAfterSaleApi(item.id);
        // if (res.code === 200) {
        //   message.success('售后申请已取消');
        //   fetchAfterSales();
        // } else {
        //   message.error(res.message || '取消售后申请失败');
        // }

        // 临时模拟成功
        message.success('售后申请已取消');
        fetchAfterSales();
      }
    });
  } catch (error) {
    console.error('取消售后申请失败:', error);
    message.error('取消售后申请失败，请稍后重试');
  }
};

// 处理页签切换
const handleTabChange = (key) => {
  if (key === 'orders') {
    fetchOrders();
  } else if (key === 'afterSales') {
    fetchAfterSales();
  }
};

// 组件挂载后执行
onMounted(() => {
  // 根据当前激活的页签加载数据
  if (activeTab.value === 'orders') {
    fetchOrders();
  } else if (activeTab.value === 'afterSales') {
    fetchAfterSales();
  }
});
</script>

<style scoped>
.orders-container {
  padding: 0;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  overflow-x: hidden;
}

.order-tabs {
  margin-top: 16px;
}

.filter-container {
  margin: 16px 0;
  padding: 16px;
  background: #f9f9f9;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* 表格美化 */
:deep(.ant-table) {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
}

:deep(.ant-table-content) {
  overflow-x: auto;
  width: 100%;
}

:deep(.ant-table-scroll-horizontal) {
  width: auto !important;
  max-width: 100% !important;
}

:deep(.ant-spin-nested-loading),
:deep(.ant-spin-container),
:deep(.ant-table-wrapper) {
  width: 100%;
  max-width: 100%;
}

:deep(.ant-table table) {
  width: 100%;
  max-width: 100%;
}

:deep(.orders-table) {
  overflow-x: hidden;
  margin: 0;
  width: 100%;
  max-width: 100%;
}

:deep(.ant-table-thead > tr > th) {
  text-align: center;
  background-color: #f0f7ff;
  font-weight: 600;
  color: #000000;
  padding: 12px 16px;
}

:deep(.ant-table-tbody > tr > td) {
  transition: background-color 0.3s;
}

:deep(.ant-table-tbody > tr:hover > td) {
  background-color: #f0f7ff;
}

:deep(.ant-table-tbody > tr:nth-child(even) > td) {
  background-color: #fafafa;
}

:deep(.ant-table-row) {
  cursor: pointer;
}

:deep(.ant-table-pagination) {
  margin: 16px 0;
}

/* 订单号列样式 */
:deep(.ant-table-tbody > tr > td:first-child a) {
  color: #000000;
  font-weight: 500;
}

/* 状态标签美化 */
:deep(.ant-tag) {
  border-radius: 12px;
  padding: 0 10px;
  font-weight: 500;
}

/* 按钮组美化 */
:deep(.ant-btn) {
  border-radius: 4px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
}

:deep(.ant-btn-primary) {
  box-shadow: 0 2px 0 rgba(24, 144, 255, 0.1);
}

:deep(.ant-btn-dangerous) {
  box-shadow: 0 2px 0 rgba(255, 77, 79, 0.1);
}

.order-detail-drawer :deep(.ant-descriptions-item-label) {
  font-weight: 500;
  background-color: #fafafa;
}

.divider-title {
  font-size: 16px;
  font-weight: 500;
  color: #000000;
}

.product-list-container {
  margin: 16px 0;
}

.product-list {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.product-item {
  padding: 16px;
  transition: background-color 0.3s;
}

.product-item:hover {
  background-color: #f5f5f5;
}

.product-meta {
  flex: 1;
}

.product-image-container {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.product-image:hover {
  transform: scale(1.05);
}

.product-name {
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.product-spec {
  color: #666;
  font-size: 13px;
  display: flex;
  align-items: center;
}

.color-image-container {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  margin-left: 8px;
  border: 1px solid #eee;
  vertical-align: middle;
}

.color-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-price-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 120px;
}

.price-item {
  margin-bottom: 6px;
  color: #666;
}

.price-value, .quantity {
  font-weight: 500;
  color: #333;
}

.subtotal {
  font-weight: 500;
}

.subtotal-value {
  color: #ff4d4f;
  font-weight: 600;
}

.order-total {
  margin-top: 24px;
  padding: 16px 20px;
  background: #f9f9f9;
  border-radius: 8px;
  text-align: right;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.total-row {
  margin-bottom: 8px;
  color: #666;
}

.total-value {
  font-weight: 500;
  color: #333;
  margin-left: 8px;
}

.discount-value {
  font-weight: 500;
  color: #52c41a;
  margin-left: 8px;
}

.grand-total {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #d9d9d9;
}

.grand-total-value {
  font-size: 20px;
  color: #f5222d;
  margin-left: 8px;
}

.countdown {
  font-size: 14px;
  color: #ff5f3c;
  margin-right: 15px;
  display: flex;
  align-items: center;
}

.order-actions {
  margin-top: 24px;
  padding: 16px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.order-actions .ant-btn {
  margin-left: 12px;
}

.after-sales-container {
  padding: 16px 0;
}

/* 媒体响应式断点1280px */
@media (max-width: 1280px) {
  .orders-container {
    padding: 0;
    overflow-x: hidden;
    max-width: 100%;
  }

  .filter-container {
    padding: 12px;
  }

  .product-image-container {
    width: 60px;
    height: 60px;
  }

  .product-price-info {
    min-width: 100px;
  }

  .order-total {
    padding: 12px 16px;
  }

  .grand-total {
    font-size: 16px;
  }

  .grand-total-value {
    font-size: 18px;
  }

  /* 调整表格列宽度 */
  :deep(.ant-table-thead > tr > th),
  :deep(.ant-table-tbody > tr > td) {
    padding: 12px 8px;
  }

  /* 紧凑表格 */
  :deep(.ant-table) {
    font-size: 13px;
  }

  /* 调整按钮大小和间距 */
  :deep(.ant-btn-sm) {
    font-size: 12px;
    padding: 0 8px;
    height: 24px;
  }

  :deep(.ant-space) {
    gap: 4px !important;
  }

  /* 调整表单项在小屏幕上的布局 */
  :deep(.ant-form-inline .ant-form-item) {
    margin-right: 8px;
    margin-bottom: 8px;
  }

  :deep(.ant-form-inline) {
    flex-wrap: wrap;
  }

  :deep(.ant-select) {
    width: 120px !important;
  }

  :deep(.ant-picker) {
    width: 230px !important;
  }

  /* 抽屉在小屏幕上占据更多空间 */
  :deep(.ant-drawer-content-wrapper) {
    width: 90% !important;
  }

  /* 售后列表卡片样式调整 */
  :deep(.ant-list-item) {
    padding: 8px;
  }

  :deep(.ant-card-body) {
    padding: 12px;
  }

  :deep(.ant-descriptions-title) {
    font-size: 15px;
  }

  :deep(.ant-table-scroll-horizontal) {
    width: auto !important;
  }

  :deep(.ant-table-content) {
    overflow-x: auto;
  }
}

/* 极小屏幕适配 */
@media (max-width: 576px) {
  :deep(.ant-form-inline) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  :deep(.ant-form-inline .ant-form-item) {
    width: 100%;
    margin-right: 0;
  }

  :deep(.ant-select),
  :deep(.ant-picker) {
    width: 100% !important;
  }

  :deep(.ant-table-thead > tr > th),
  :deep(.ant-table-tbody > tr > td) {
    padding: 8px 4px;
    font-size: 12px;
  }

  /* 隐藏某些列 */
  :deep(.ant-table-cell:nth-child(3)),
  :deep(.ant-table-cell:nth-child(4)) {
    display: none;
  }
}

/* 抽屉层级调整 */
:deep(.ant-drawer) {
  z-index: 1050;
}

/* 模态框层级调整 */
:deep(.ant-modal-wrap) {
  z-index: 1060;
}
</style>
